<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="top-nav">
      <!-- 左侧区域：包含logo和菜单 -->
      <div class="left-section">
        <div class="logo-container">
          <!-- 可以跳转到首页 -->
          <span class="system-name" @click="goToHome">SaaS需求云平台</span>
        </div>

        <!-- 菜单 - 使用ElementPlus组件 -->
        <el-menu ref="menuRef" :router="false" mode="horizontal" background-color="transparent" text-color="#606266"
          active-text-color="#1890ff" class="menu-nav" @select="handleMenuSelect">
          <el-menu-item v-for="menu in userMenus" :key="menu.route || menu.label" :index="menu.route || menu.label">
            <el-icon v-if="menu.icon">
              <component :is="menu.icon" />
            </el-icon>
            <span>{{ menu.label }}</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 用户操作区域 -->
      <div class="user-actions">
        <template v-if="!userStore.userInfo.isLoggedIn">
          <el-button type="primary" link @click="$router.push('/login')">登录</el-button>
        </template>
        <template v-else>
          <div class="user-info">
            <span>欢迎，{{ userStore.userInfo.realName || userStore.userInfo.username }}</span>
            <span class="user-type">{{ userStore.userTypeText }}</span>
            <el-button type="primary" @click="handleLogout">退出</el-button>
          </div>
        </template>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useMenu } from '@/hooks/useMenu';

const router = useRouter();
const route = useRoute();
const menuRef = ref(null);

// 使用菜单管理hook
const { userStore, userMenus, handleLogout } = useMenu();

// 处理菜单选择事件
const handleMenuSelect = (index) => {
  // 直接跳转到对应的路由路径
  router.push(index);
};

// 跳转到首页并清除菜单选中状态
const goToHome = () => {
  router.push('/main');
};

// 监听路由变化，当路由为首页时清除菜单选中状态
watch(
  () => route.path,
  (newPath) => {
    // 当路由为首页时，清除菜单选中状态
    if (newPath === '/main') {
      // 备用方案：通过CSS类名手动移除选中样式
      const activeItems = document.querySelectorAll('.el-menu-item.is-active');
      activeItems.forEach(item => {
        item.classList.remove('is-active');
      });
    }
  },
  { immediate: true } // 立即执行一次，确保初始状态正确
);

// 在组件挂载时恢复用户信息
onMounted(() => {
  // 从localStorage恢复用户信息
  userStore.recoverUserInfo();
});
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 左侧区域：包含logo和菜单 */
.left-section {
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  height: 32px;
  width: 32px;
}

.system-name {
  font-size: 20px;
  font-weight: 600;
  color: #1890ff;
  cursor: pointer;
}

/* 菜单样式 */
.menu-nav {
  display: flex;
  align-items: center;
  width: 1000px;
  /* 最大宽度限制 */
  /* ElementPlus菜单已自带间距和基本样式 */
}

/* 统一字体颜色 - 通过ElementPlus的text-color属性已设置 */
.el-menu-item {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  /* 默认文本颜色 */
  transition: none !important;
  /* 禁用过渡动画 */
}

.el-menu-item:hover {
  color: #1890ff;
  /* 悬停颜色 */
  transition: none !important;
  /* 禁用过渡动画 */
}

.el-menu-item.is-active {
  color: #1890ff;
  /* 激活状态颜色 */
  font-weight: 600;
  transition: none !important;
  /* 禁用过渡动画 */
}

/* 取消菜单栏的底部下划线 */
.el-menu--horizontal {
  border-bottom: none;
}

/* 取消菜单项被选中的下划线和背景色遮盖 */
.el-menu-item.is-active {
  border-bottom: none;
  background-color: transparent !important;
  /* 移除选中时的背景色遮盖 */
}

/* 主内容区域 */
.main-content {
  flex: 1;
  overflow-x: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-nav {
    padding: 0 16px;
  }

  .system-name {
    font-size: 16px;
  }

  .menu-list {
    gap: 16px;
  }

  .menu-text {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .menu-nav {
    overflow-x: auto;
    padding: 0 8px;
  }

  .menu-list {
    gap: 12px;
    min-width: max-content;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>